<template>
  <div class="profile-container">
    <h2 class="page-title">个人资料</h2>
    
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>用户信息</span>
        </div>
      </template>
      
      <div class="profile-info">
        <div class="profile-avatar">
          <div class="avatar-circle">
            {{ userInfo.username.charAt(0).toUpperCase() }}
          </div>
        </div>
        
        <div class="profile-details">
          <div class="profile-item">
            <label>用户名：</label>
            <span>{{ userInfo.username }}</span>
          </div>
          <div class="profile-item">
            <label>角色：</label>
            <span>{{ userInfo.role }}</span>
          </div>
          <div class="profile-item">
            <label>最后登录时间：</label>
            <span>{{ formatDate(userInfo.lastLoginTime) }}</span>
          </div>
          <div class="profile-item">
            <label>登录状态：</label>
            <span class="status-online">在线</span>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="security-card">
      <template #header>
        <div class="card-header">
          <span>安全信息</span>
        </div>
      </template>
      
      <div class="security-info">
        <div class="security-item">
          <span>登录设备</span>
          <span>浏览器 - Windows</span>
        </div>
        <div class="security-item">
          <span>登录IP</span>
          <span>127.0.0.1</span>
        </div>
        <div class="security-item">
          <span>Token有效期</span>
          <span>{{ formatDate(userInfo.tokenExpiryTime) }}</span>
        </div>
      </div>
      
      <div class="security-actions">
        <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
        <el-button @click="handleForceLogout">强制下线其他设备</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElCard, ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const userInfo = reactive({
  username: 'admin',
  role: '系统管理员',
  lastLoginTime: new Date().toISOString(),
  tokenExpiryTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString() // 7天后过期
})

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 处理修改密码
const handleChangePassword = () => {
  ElMessageBox.alert(
    '修改密码功能正在开发中，请稍后再试。',
    '提示',
    {
      confirmButtonText: '确定',
      type: 'info'
    }
  )
}

// 处理强制下线
const handleForceLogout = () => {
  ElMessageBox.confirm(
    '确定要强制下线其他设备吗？这将使您的账户在其他设备上的登录失效。',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟强制下线操作
    ElMessage.success('已成功强制下线其他设备')
    // 在实际项目中，这里会发送请求到后端API更新token
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
}

.profile-card, .security-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.profile-info {
  display: flex;
  align-items: flex-start;
  padding: 20px;
}

.profile-avatar {
  margin-right: 30px;
}

.avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  color: white;
}

.profile-details {
  flex: 1;
}

.profile-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.profile-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.profile-item label {
  width: 120px;
  color: #606266;
  font-weight: 500;
}

.profile-item span {
  color: #303133;
}

.status-online {
  color: #67c23a;
  font-weight: 500;
}

.security-info {
  padding: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.security-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.security-actions {
  padding: 20px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
}
</style>